<template>
  <!-- 搜索工作栏 -->
  <div class="header">
    <div class="search-tools">
      <!-- <SearchBar :searchConfig="searchConfig"
                @transferSearchParams="transferSearchParams"
                @search="handleSearch"
                @resetSearchParams="handleSearch"
                ref="formParams" labelWidth="100px" labelPosition="right" style="margin: 0 0 15px 0">
                <el-button slot="inner" @click="handleAdd" size="small" type="primary">新建</el-button>
            </SearchBar> -->
      <el-row style="margin-bottom: 10px; width: 100%">
        <el-col :span="6">
          <el-input
            v-model="searchParams.title"
            :style="{ width: '250px'}"
            placeholder="请输入标题"
            size="small"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="searchParams.typeId"
            size="small"
            clearable
            :style="{ width: '250px'}"
            placeholder="请选择分类"
          >
            <el-option
              v-for="ele in columnList"
              :key="ele.value"
              :label="ele.label"
              :value="ele.value"
            />
          </el-select>
        </el-col>
        <!-- <el-col :span="6">
                    <el-select
                        v-model="searchParams.status"
                        size="small"
                        clearable
                        :style="{ width: '250px'}"
                        placeholder="请选择发布动态">
                        <el-option
                            v-for="ele in activeList"
                            :key="ele.value"
                            :label="ele.label"
                            :value="ele.value">
                        </el-option>
                    </el-select>
                </el-col> -->
        <el-col :span="4">
          <el-button size="small" @click="resetSearch">重置</el-button>
          <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
          <!-- <el-button @click="handleAdd" size="small" type="primary">新建</el-button> -->
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col>
          <el-button
            :disabled="tableSelectList.length === 0"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleBatchRecovery"
          >
            批量还原
          </el-button>
        </el-col>
      </el-row>
    </div>

    <Table
      ref="tableList"
      :table-config="leftTableConfig"
      :table-data="tableData"
      :total="total"
      :page-no="pageNo"
      :page-size="pageSize"
      @sortChange="sortChange"
      @handleSelectionChange="handleSelectionChange"
      @handleChangePage="handleChangePage"
    >
      <template slot="id" slot-scope="scope">
        <div class="title-box">
          <span>{{ scope.data.index + (pageNo - 1) * pageSize + 1 }}</span>
        </div>
      </template>
      <template slot="title" slot-scope="scope">
        <div class="title-box">
          <span>{{ scope.data.row.title }}</span>
        </div>
      </template>
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="scope">
          <div class="btn-box">
            <span class="btns" @click="handleRecovery(scope.row)">还原</span>
          </div>
        </template>
      </el-table-column>
    </Table>
    <!-- <AddColumnPop ref="addColumnPop" @success="handleSearch" /> -->
    <!-- <ViewNews ref="viewNews" /> -->
    <ChooseTypePop ref="chooseTypePop" @confirmBack="confirmBack" />
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import { TYPE, recycleBinSearch, leftTableConfig } from './initData'
import SearchBar from '@/views/components/SearchBar'
// import Pagination from '@/views/components/Pagination'
import Table from '@/views/components/Table'
import ChooseTypePop from './../components/chooseTypePop.vue'
import { getTableList, updateBatch, getColumnList } from '@/api/content-manage/researchResult.js'
import { formatDate } from '@/utils/index.js'
export default {
  name: 'NewsList',
  components: {
    SearchBar,
    Table,
    ChooseTypePop
  },
  data() {
    return {
      searchConfig: recycleBinSearch,
      leftTableConfig,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableSelectList: [],
      sortable: null,
      searchParams: {},
      sortingFields: null,
      activeList: [{ label: '未发布', value: '0' }, { label: '已发布', value: '1' }],
      columnList: []
    }
  },
  created() {
    this.getList()
    this.getColumnList()
  },
  mounted() {
    // this.dragSort();
  },
  methods: {
    // 获取搜索框数据
    // transferSearchParams(params) {
    //     this.searchParams = params;
    // },
    async resetSearch() {
      this.searchParams = {}
      this.sortingFields = null
      this.$refs.tableList && this.$refs.tableList.$children[0].clearSort()
      this.handleSearch()
    },
    handleSearch() {
      this.pageNo = 1
      this.getList()
    },
    async getList() {
      const { code, data } = await getTableList({
        ...this.searchParams,
        sortingFields: this.sortingFields,
        type: TYPE,
        deleted: 1, // 写死
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (code === 0) {
        this.tableData = data.list.map(v => {
          return {
            ...v,
            createTimeStr: formatDate(v.createTime),
            updateTimeStr: formatDate(v.updateTime),
            releaseTimeStr: formatDate(v.releaseTime),
            // releaseTime
            statusName: v.status === '0' ? '未发布' : '发布',
            typeName: v.type === 1 ? '新闻动态' : '研究成果'
          }
        })
        this.total = data.total
      } else {
        this.tableData = []
        this.total = []
      }
    },
    // 获取栏目列表
    async getColumnList() {
      this.columnList = await this.columnListApi()
    },
    async columnListApi() {
      let columnList = []
      const { code, data } = await getColumnList({
        pageNo: 1,
        pageSize: 1000,
        type: TYPE,
        status: '1'
      })
      if (code === 0 && data && data.list && data.list.length > 0) {
        columnList = data.list.map(v => {
          return {
            label: v.name,
            value: v.id
          }
        })
      }
      return columnList
    },
    handleSelectionChange(val) {
      this.tableSelectList = val
    },
    handleChangePage({ pageNo, pageSize }) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.getList()
    },

    async handleRecovery(row) {
      if (row.typeId) {
        this.$confirm(`是否确认还原?`, '提示').then(async() => {
          this.confirmBack(row)
        })
      } else {
        this.columnList = await this.columnListApi()
        this.$refs.chooseTypePop && this.$refs.chooseTypePop.open({ row, columnList: this.columnList })
      }
    },

    async confirmBack({ id, typeId, done }) {
      const { code, msg } = await updateBatch({
        operate: 'recovery',
        ids: id ? [id] : this.tableSelectList.map(v => v.id),
        typeId: typeId,
        type: TYPE
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      done && done()
      this.$message.success('还原成功')
      this.handleSearch()
    },

    async handleBatchRecovery() {
      if (!this.tableSelectList || this.tableSelectList.lengtg === 0) {
        this.$message.warning('请选择新闻')
        return
      }
      this.columnList = await this.columnListApi()
      this.$refs.chooseTypePop && this.$refs.chooseTypePop.open({ columnList: this.columnList })
      // this.$confirm(`是否确认还原?`, '提示').then( async() => {
      //     const { code, msg } = await updateBatch({
      //         ids: this.tableSelectList.map(v => v.id),
      //         operate: 'recovery',
      //         type: TYPE
      //     });
      //     if (code !== 0) {
      //         this.$message.error(msg);
      //         return
      //     };
      //     this.$message.success('还原成功');
      //     this.handleSearch();
      // });
    },

    sortChange(sortingFields) {
      this.sortingFields = sortingFields
      this.handleSearch()
    }
    // //表格拖动排序
    // dragSort() {
    //     const el = this.$refs.singleTable.$el.querySelectorAll(
    //         ".el-table__body-wrapper > table > tbody"
    //     )[0];
    //     this.sortable = Sortable.create(el, {
    //         ghostClass: "sortable-ghost",
    //         setData: function (dataTransfer) {
    //             dataTransfer.setData("Text", "");
    //         },
    //         onEnd: (e) => {
    //             console.log(e, '----拖动结果')
    //             const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
    //             this.tableData.splice(e.newIndex, 0, targetRow);
    //             //这块根据自己需求处理
    //             let temp = [];
    //             this.tableData.map((m, i) => {
    //                 temp.push({
    //                     id: m.id,
    //                     seq: i,
    //                 });
    //             });
    //         },
    //     });
    // },
  }
}
</script>

<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            flex-direction: column;
        }

        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .btns {
                color: #02A7F0;
                cursor: pointer;
            }
            .delete {
                color: #f56c6c;
            }
        }
    }
</style>
